<template>
  <div class="home-container">
    <!-- 头部 -->
    <el-header class="main-header">
      <div class="header-content">
        <el-icon class="system-icon" :size="32"><HomeFilled /></el-icon>
        <h1 class="system-title">寝室管理系统</h1>
      </div>
    </el-header>

    <!-- 主内容 -->
    <el-main class="welcome-content">
      <el-card class="welcome-card" shadow="never">
        <div class="welcome-body">
          <div class="welcome-icon">
            <el-icon :size="64" color="#409EFF"><User /></el-icon>
            <el-icon :size="48" color="#67C23A" class="deco-icon"><HomeFilled /></el-icon>
          </div>

          <h2 class="welcome-title">
            欢迎使用寝室管理系统
            <el-icon color="#E6A23C"><Promotion /></el-icon>
          </h2>

          <el-divider class="custom-divider">
            <el-icon><StarFilled /></el-icon>
          </el-divider>

          <p class="welcome-text">
            <el-icon><Opportunity /></el-icon>
            当前系统状态：<el-tag type="success">运行正常</el-tag>
          </p>

          <div class="welcome-grid">
            <el-statistic
                title="管理寝室"
                :value="0"
                class="stat-item"
            >
              <template #prefix>
                <el-icon><OfficeBuilding /></el-icon>
              </template>
            </el-statistic>

            <el-statistic
                title="服务学生"
                :value="0"
                class="stat-item"
            >
              <template #prefix>
                <el-icon><UserFilled /></el-icon>
              </template>
            </el-statistic>
          </div>
        </div>
      </el-card>
    </el-main>

    <!-- 底部 -->
    <el-footer class="simple-footer">
      <p>智慧校园生活服务平台</p>
    </el-footer>
  </div>
</template>

<script setup>
import {
  HomeFilled, User, Promotion, StarFilled,
  Opportunity, OfficeBuilding, UserFilled, Key
} from '@element-plus/icons-vue'
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fc 0%, #e9ecef 100%);
}

.main-header {
  padding: 1rem 0;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.system-icon {
  color: #409EFF;
}

.system-title {
  margin: 0;
  font-size: 1.5rem;
  color: #303133;
}

.welcome-content {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

.welcome-card {
  border: none;
  background: rgba(255,255,255,0.95);
}

.welcome-body {
  padding: 2rem;
  text-align: center;
}

.welcome-icon {
  position: relative;
  margin-bottom: 2rem;
}

.deco-icon {
  position: absolute;
  right: 10%;
  top: -20px;
  opacity: 0.8;
}

.welcome-title {
  color: #303133;
  margin: 1rem 0;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.custom-divider {
  --el-divider-text-color: #E6A23C;
}

.welcome-text {
  color: #606266;
  font-size: 1.1rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 3rem 0;
}

.stat-item {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.enter-btn {
  margin-top: 2rem;
  padding: 1.2rem 3rem;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.simple-footer {
  text-align: center;
  padding: 1.5rem;
  color: #909399;
  background: rgba(255,255,255,0.9);
}

@media (max-width: 768px) {
  .system-title {
    font-size: 1.2rem;
  }

  .welcome-title {
    font-size: 1.5rem;
  }

  .welcome-grid {
    grid-template-columns: 1fr;
  }
}
</style>